<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #000;
        font-size: 80px;
        color: #fff;
        text-align: center;
      }
      .overlap {
        font-family: "Courier New";
        letter-spacing: -35px;
      }

      .overlap span {
        text-shadow: 35px 0 35px #000;
        position: relative;
        z-index: var(--i);
      }
    </style>
  </head>
  <body>
    <h1 class="overlap">HelloWorld</h1>
    <script>
      /*
        - 实现文字堆叠效果
        - 每个文字用一个单独的span标签包裹起来
        - 设置每一元素的z-index , 实现层级关系
      */
      const overlap = document.querySelector(".overlap");
      //   overlap.innerHTML = overlap.textContent
      //     .split("")
      //     .map((c) => `<span>${c}</span>`)
      //     .join("");
      overlap.innerHTML = overlap.textContent
        .split("")
        .map((c, i, arr) => `<span style="--i:${arr.length - i}">${c}</span>`)
        .join("");
    </script>
  </body>
</html>
